<template>
    <el-row>
        <el-col :span="18" :offset="3">
            <a class="back-a" @click="back">后退</a>
        </el-col>
        <el-col :span="18" :offset="3">
            <div v-if="reply">
                <a class="a-reply" @click="goToPost(reply.postId)">&nbsp;前往帖子</a>
                <reply-item @listStorey="listStorey(reply.id)"
                            @reloadReply="obtainReply"
                            :reply="reply"></reply-item>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import ReplyItem from '@/components/postReply/ReplyItem'
    import { mapActions } from 'vuex'

    export default {
        name: 'oneReply',
        components: {
            ReplyItem
        },
        data () {
            return {
                reply: null
            }
        },
        mounted () {
            this.obtainReply()
        },
        methods: {
            ...mapActions({
                pageCurrentRepliesAction: 'reply/pageCurrentReplies',
                listStoreyAction: 'storey/listStorey',
                getPostByIdAction: 'post/getById',
                getReplyByIdAction: 'reply/getById'
            }),
            obtainReply () {
                let path = this.$route.path
                let id = path.substr(path.lastIndexOf('/') + 1)
                this.action(this.getReplyByIdAction(id), data => {
                    this.reply = data.data
                })
            },
            listStorey (id) {
                this.action(this.listStoreyAction(id), data => {
                    this.reply.storeys = data.data
                })
            },
            goToPost (id) {
                this.action(this.getPostByIdAction(id), data => {
                    let post = data.data
                    this.$router.push(`/area/${post.area}/${post.id}`)
                })
            },
            back () {
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .back-a {
        float: right;
        font-size: 16px;
        line-height: 48px;
        color: #6159ff;
    }

    .a-reply {
        font-size: 16px;
        float: left;
        color: rgba(255, 44, 231, 0.81);
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    a:link {
        color: #216278;
    }

    a:visited {
        color: #216278;
    }

    a:hover {
        color: rgba(255, 151, 60, 0.8);
    }

    a:active {
        color: rgba(255, 86, 25, 0.8);
    }
</style>
